<template>
  <div class="slot1">
    插槽slot1：<br>
    <slot name="slot1">插槽1</slot>
    <br>
    <slot name="slot2">插槽2</slot>
    <br>
    <slot name="slot3" :user2="user">
      <div>这是slot3的内容：</div>
      {{user.name}}
    </slot>
    <br>
    <button @click="changeUser">修改user信息</button>
  </div>
</template>

<script>
  export default {
    name: "slot1",
    props: {
      user: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    methods: {
      changeUser() {
        this.$emit('change', { name: 'changeName', sex: 'changeSex'})
      }
    }
  }
</script>

<style scoped>

</style>
